<template>
	<view class="revenueRecordsPage">

		<!-- <view class="backgroundImage" v-if="statistics">
			<view style="color: rgba(255, 255, 255, 0.5);" class="">
				总账户余额
			</view>
			<view style="color: rgb(255, 255, 255);font-size: 20px;" class="margin-top_20rpx">
				{{statistics.balance}}元
			</view>
		</view> -->

		<view class="revenueRecordsContaner">
			<sunui-navbar :items="tabList" lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex"
				padding="0rpx" activeColor="rgb(0, 124, 255)" :size="112" activeLineBg="rgb(0, 124, 255)"
				textAlign="center" activeLineWidth="100%" activeDirection="space-between" activeLineHeight="4rpx"
				bgColor="transparent" :margin="30" @change="getChanges"></sunui-navbar>

			<view class="month flex-between">
				<view class="flex">
					<!-- 切换店铺
					<uni-icons type="right" color='#333' size="16"></uni-icons> -->
				</view>
				<picker mode="date" :value="date" :fields="currentTimeFn(currentTime)" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="flex-align-center-justify-start  color6">
						{{ yeartime }}
						<text>-</text>
						{{ monthtime }}
						<text>-</text>
						{{ daytime }}
						<uni-icons type="right" color='#333' size="16"></uni-icons>
						<!-- <image class="arrowImg" src="../../static/124.png" mode=""></image> -->

					</view>

				</picker>
			</view>
			<view v-if="statistics" class="flex-between margin-top_20rpx" style="color: rgb(153, 153, 153);">
				<text>营业额(元)：￥{{statistics.consumption_amount}}</text>
				<!-- <image class="timeImg" src="../../static/会员卡管理端/path (2).png" mode=""></image> -->
				<view class="">
					<text>成交数：{{statistics.order_count}}</text>
				</view>
			</view>
			<view class="selectTime flex-align-center" v-if="currentIndex==0">
				<view class="tab " v-for="(item, index) in orderStatusArr2" :key="index">
					<view :class="[currentIndexTb == orderStatusArr2[index].id ? 'active ' : ''] " @click="switchTimeTab(orderStatusArr2[index].id)">
						{{ item.value }}
					</view>
				</view>

			</view>
			<view class="selectTime flex-align-center" v-if="currentIndex==1">

				<view class="tab " v-for="(item, index) in orderStatusArr1" :key="index">
					<view :class="[currentIndexTb == index ? 'active ' : ''] " @click="switchTimeTab(index)">
						{{ item.value }}
					</view>
				</view>
			</view>
		<!-- 	<view class="selectTime flex-align-center" v-if="currentIndex==2">

				<view class="tab " v-for="(item, index) in orderStatusArr" :key="index">
					<view :class="[currentIndexTb == index ? 'active ' : ''] " @click="switchTimeTab(index)">
						{{ item.value }}
					</view>
				</view>
			</view> -->
			<!-- 营收记录 -->
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption" >
				<block v-for="(item,index) in list" :key="index" >
					<view class="revenueRecordsList margin-top_30rpx" @click="revenueDetailFn(item)">
						<view class="flex-between  font-weight_bold padding-bottom_15rpx  border-bottom-ECECEC">
							<view class="font-size_30rpx">
								{{tabList[currentIndex].name}}
							</view>
							<view class="font-size_30rpx" style="color: rgb(250, 44, 25);">
								￥{{(Number(item.amount))}}
							</view>
						</view>
						<view class="flex-between padding-top_15rpx   margin-bottom_20rpx"
							style="color: rgb(117, 117, 117);">
							<view class="">
								<text>用户手机号：<text style="color: rgb(51, 51, 51);">{{item.phone}}</text></text>
							</view>

						</view>
						<view class="flex-between margin-bottom_20rpx" style="color: rgb(117, 117, 117);">
							<view class="">
								<text>用户昵称：<text style="color: rgb(51, 51, 51);">{{item.wachat_nickname?item.wachat_nickname:'--'}}</text></text>
							</view>

						</view>
						<view class="flex-between margin-bottom_20rpx" style="color: rgb(117, 117, 117);">
							<view class="">
								<text>充值时间：<text style="color: rgb(51, 51, 51);">{{item.create_time}}</text></text>
							</view>

						</view>
						<view class="flex-between margin-bottom_20rpx" style="color: rgb(117, 117, 117);">
							<view class="">
								<text>支付订单号：<text style="color: rgb(51, 51, 51);">{{item.order_sn}}</text></text>
							</view>

						</view>
						<view class="flex-between margin-bottom_20rpx" style="color: rgb(117, 117, 117);">
							<view class="">
								<text>支付方式：<text style="color: rgb(51, 51, 51);">{{serviceStatusType(item.pay_method)}}</text></text>
							</view>
							
						</view>
						<view class="flex-between margin-bottom_20rpx" style="color: rgb(117, 117, 117);">
							<view class="">
								<text>支付金额：<text style="color: rgb(51, 51, 51);">{{(Number(item.amount))}}元</text></text>
							</view>
							
						</view>
						<view class="flex-between margin-bottom_20rpx" style="color: rgb(117, 117, 117);">
							<view class="">
								<text>消费类型：<text
										style="color: rgb(51, 51, 51);">{{orderStatusFn(item.operate_type)}}</text></text>
							</view>

						</view>
						<view class="flex-between " style="color: rgb(117, 117, 117);">
							<view class="">
								<text>操作人员：<text style="color: rgb(51, 51, 51);">{{item.name?item.name:'--'}}</text></text>
							</view>
							
						</view>
						
					</view>
					<!-- <view class="revenueRecordsList margin-top_30rpx " v-else>
						<view class="flex-between  font-weight_bold padding-bottom_15rpx  ">
							<view class="font-size_30rpx">
								提现单号：3233252512112232
							</view>

						</view>
						<view class="flex-between padding-top_15rpx  padding-bottom_30rpx border-bottom-ECECEC">
							<view class="flex">
								<image class="image" src="../../static/会员卡管理端/组合 309.png" mode=""></image>
								<view class="flex-columns-center margin-left_30rpx ">
									<text class="font-weight_bold margin-bottom_10rpx font-overflow"
										style="font-size: 30rpx;width:400rpx;">{{item.nickname}}</text>
									<text style="color: rgb(255, 0, 0);font-size: 26rpx;" class="font-weight_bold">
										提现方式：支付宝
									</text>

								</view>

							</view>

							<view class="flex-column-end margin-left_30rpx  ">
								<text style="color: rgb(255, 0, 0);font-size: 26rpx;" class="font-weight_bold">
									￥{{item.amount}}
								</text>
							</view>

						</view>
					
						<view class="flex-start margin-top_20rpx">
							<text>提现时间 ：{{item.create_time}}</text>
						</view>
					</view> -->
				</block>
			</mescroll-body>



		</view>

	</view>
</template>


<script>
	export default {
		components: {

		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				currentIndexTb: 0,
				form: {
					// 1 在线 ，2 线下 3线上 4余额
					pay_type: '1',
					//'1 微信 2支付宝 3 现金 4 余额 5 pos机
					pay_method: undefined,
				},

				tabIndex: 4,
				navIndex: 0,
				currentIndex: 0,
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],

				tabList: [{
					name: '线上扫码',
					id: '1' //null
				}, {
					name: '线下操作',
					id: '2' //null
				}, {
					name: '在线充值',
					id: '3' //null
				}, {
					name: '余额',
					id: '4' //null
				}],
				currentTime: '1',
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],
				orderStatusArr1: [{
						value: '全部'
					},
					{
						value: '微信 '
					},
					{
						value: '支付宝'
					},
					{
						value: '现金'
					},
					{
						value: '余额'
					},
					{
						value: 'pos机'
					}
				],
				orderStatusArr: [{
						value: '全部'
					},
					{
						value: '微信'
					},
					{
						value: '支付宝'
					},
					{
						value: '现金'
					},
					{
						value: '余额'
					},
				],
				orderStatusArr2: [{
						value: '全部',
						id: 0
					},
					{
						value: '微信',
						id: 1
					},

					{
						value: '支付宝',
						id: 2
					},
					{
						value: '余额',
						id: 4
					},

				],
				date: null,
				createTime:currentDate,
				statistics:null

			}
		},
		onLoad() {
			uni.$on('click', this.showAlert)
			
		},
		onShow() {
			this.$nextTick(()=>{
				this.mescroll?.resetUpScroll();
				 this.init()
			})
           
		},
		methods: {
			async init(){
				
				const result = await this.$http.post({
					url: this.$api.statistics,
					data: {
						start_time:this.createTime
				
					}, 
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
				
				})
				console.log(result)
				if(result.code==0){
					this.statistics=result.data
				}
			},
			revenueDetailFn(item){
				this.$sun.navGo('/pages/revenueRecords/revenueDetails',{...item})
			},
			getChanges(index) {
				console.log(index)
				this.currentIndexTb = 0
				this.currentIndex = index
				this.form.pay_method = undefined
				this.form.pay_type = index + 1
				this.mescroll?.resetUpScroll();
			},

			switchTimeTab(index) {

				this.currentIndexTb = index;
				if (index) {
					this.form.pay_method = index;
				} else {
					this.form.pay_method = 0;
				}

				this.mescroll?.resetUpScroll();

			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

			bindDateChange(e) {


				this.createTime = e.detail.value
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];

                this.init()
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.amountLog,
					data: {
						page: scroll.num,
						limit: 10,
						pay_type: this.form.pay_type,
						pay_method: this.form.pay_method,

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list);
					// = imgStr1.split(',').map((item) => item.trim());
					// this.list.forEach((item)=>{
					// 	item.host_img=item.host_img.split(',').map((item) => item.trim());
					// })

					console.log('this.list', this.list, this.list.length);
				}
			},
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			// 订单状态
			orderStatusFn: function() {
				return function (status) {
				       let orderStatus = '';
				       // status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
				       // orderStatus =
				       //   status == 1 ? '余额充值' : status == 2 ? '购买商品' : '购买套餐 ';
								
				       orderStatus =
				         status == 1 ? '微信在线充值余额' : status == 2 ? '微信线下扫码充值' : status == 3 ? '支付宝线下充值余额':status == 4 
				         ? '现金充值余额':status == 5 ? 'pos机充值余额':status == 6 ? '微信在线扫码充值余额':status == 7 ? '支付宝在线扫码充值余额'
				         :status == 8 ? '微信在线购买商品':status == 9 ? '余额购买商品':status == 10? '微信在线购买套餐卡':status == 11? '余额购买套餐卡'
				         :status == 12? '微信线下购买套餐卡':status == 13? '支付宝线下购买套餐卡':status == 14? '现金购买套餐卡':status == 15? 'pos购买套餐卡'
				         :status == 16? '微信在线扫码购买套餐卡':status == 17? '支付宝在线扫码购买套餐卡':status == 18? '微信在线购买商品退款':status == 19? '余额购买商品退款'
				         :status == 20? '手动操作余额':status == 21? '余额线下消费':status == 22? '微信线下消费':status == 23? '支付宝线下消费':status == 24? '现金线下消费':status == 25? 
				         'pos线下消费':status == 26? '微信在线消费':'支付宝在线消费';
				       return orderStatus;
				     };
			},
			serviceStatusType: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 1 ? '微信' : status == 2 ? '支付宝' : status == 3 ? '现金' : status == 4 ? '余额' :
						'pos机';

					return orderStatus;
				};
			},
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			}




		},
	}
</script>
<style lang="less" scoped>
	.revenueRecordsPage {
		.backgroundImage {
			padding: 40rpx;
			background: rgb(81, 102, 246);
			width: 750rpx;
			height: 220rpx;
		}

		.revenueRecordsContaner {
			border-radius: 20rpx;
			margin-top: -15rpx;
			background: linear-gradient(180.00deg, #f6f6f6 67.308%, rgba(255, 255, 255, 0) 100%);
			padding: 0 20rpx;


			.revenueRecordsList {
				position: relative;

				.image {
					width: 86rpx;
					height: 88rpx;
				}

				.sign {
					position: absolute;
					width: 140rpx;
					height: 48rpx;
					border-radius: 10px 0px 0px 10px;
					color: rgb(255, 255, 255);
					background: rgb(0, 124, 255);
					font-size: 20rpx;
					right: 0;
				}

				padding: 30rpx;

				border-radius: 10rpx;

				background:#fff;
			}

			.selectTime {

				margin-top: 20rpx;

				.tab {

					list-style-type: none;
					margin-right: 20rpx;
					display: block;
					width: 106rpx;
					height: 44rpx;
					line-height: 44rpx;

					border: 1px solid rgb(239, 239, 239);
					text-align: center;
					background: rgb(255, 255, 255);
					color: rgb(153, 153, 153);
					border-radius: 10rpx;
				}

				.active {
					border-radius: 10rpx;
					width: 106rpx;
					height: 44rpx;



					background: rgb(79, 97, 234);
					color: rgb(255, 255, 255);
					;
					text-align: center;
					line-height: 44rpx;
				}

				.orderStatus {
					width: 90px;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					font-weight: 700;

				}




			}
		}

	}

	page {
		background: #f6f6f6;
	}
</style>